{% block content %}
  <style>
    .form-wrapper{
        width: 400px;
        height: 400px;
        margin: 15% auto;
        text-align: center;
        background: #f5f5f5;
        font-size: 15pt;
    }

  .form-wrapper button{
      	background: transparent;
		border: none;
		outline: none;
		color: #fff;
		background: #e95420;
		padding: 10px 10px;
		cursor: pointer;
		border-radius: 5px;
        position: relative;
        left: 70px;
        height: 30px;
    }
  .fileWrapper{
        margin-top: 20px;
  }
  .form-wrapper-button{
      margin-top: 5px;
  }

  </style>
    <link rel = "icon" href ="/static/images/OpenStack.ico">
    <title>Login- OpenStack &nbsp; Dashboard</title>
    {% if message %}
    {% endif %}
    <div class="form-wrapper">
        <div class="form-wrapper-title">
        <p style="color: #e95420;font-size: 36px"> ubuntu<img src="/static/images/ubuntu.png"/> &nbsp;OpenStack &nbsp; Dashboard<p/>
        </div>
       <h3>Login</h3>
        <form method="post" action="" enctype="multipart/form-data">
            {% csrf_token %}
            {% for field in form %}
                <div class="fileWrapper">
                {{ field.errors }}
                {{ field.label_tag }}{{ field }}
                {% if field.help_text %}
                    <p class="help">{{ field.help_text|safe }}</p>
                {% endif %}
                </div>
            {% endfor %}
              <div class="form-wrapper-button">
               <button type="submit" name="">Connect</button>
              </div>
        </form>
    </div>
{% endblock %}